<template>
    <view>
        <view class="uni-common-mt">
            <view class="uni-form-item uni-column user-input">
                <view class="title">姓名</view>
                <view class="input">
                    <input class="uni-input" :value="information.userName" placeholder="姓名" disabled="true" />
                </view>
            </view>
            <view class="fenjie"></view>
            <view class="uni-form-item uni-column user-input">
                <view class="title">性别</view>
                <view class="input">
                    <input class="uni-input" :value="information.sex" placeholder="性别" disabled="true" />
                </view>
            </view>
            <view class="fenjie"></view>
            <view class="uni-form-item uni-column user-input">
                <view class="title">生日</view>
                <view class="input">
                    <input class="uni-input" :value="information.birthday" placeholder="生日" disabled="true" />
                </view>
            </view>
            <view class="fenjie"></view>
            <view class="uni-form-item uni-column user-input">
                <view class="title">地址</view>
                <view class="input">
                    <input class="uni-input" :value="information.address" placeholder="地址" disabled="true" />
                </view>
            </view>
            <view class="fenjie"></view>
            <view class="uni-form-item uni-column user-input">
                <view class="title">手机</view>
                <view class="input">
                    <input class="uni-input" type="number" @input="onPhone" :value="information.phone" maxlength="11"
                        placeholder="手机" />
                </view>
            </view>
            <view class="fenjie"></view>
            <view class="uni-form-item uni-column user-input">
                <view class="title">邮箱</view>
                <view class="input">
                    <input class="uni-input" :value="information.email" maxlength="50" placeholder="邮箱" />
                </view>
            </view>

            <view class="fenjie"></view>
            <view class="up-button-group">
                <button class="car-button" @click="chooseFaceImg">上传身份证人像图片</button>
                <image class="car-image" :src="facePath" mode=""></image>
                <button class="car-button" @click="chooseBackImg">上传身份证国徽图片</button>
                <image class="car-image" :src="backPath" mode=""></image>
            </view>
        </view>
        <button class="up-button" @click="upInfo()">提交信息</button>
        <view class="notes">
            <p><span>*</span>本页面所收集的信息，都为公司内部信息，请放心填写。</p>
            <p><span>*</span>信息不全无法注册，为了方便您顺利注册，请填写真实信息。</p>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                openid: '',
                user: {},
                facePath: '',
                backPath: '',
                information: {
                    userName: '',
                    birthday: '',
                    position: '',
                    phone: '',
                    email: '',
                    address: '',
                    weixin: '',
                    faceId: '',
                    backId: ''
                },
            };
        },
        // 进入页面从缓存获取用户openid
        onShow() {
            // console.log('ref', this.$refs)
            var that = this
            wx.getStorage({
                key: 'openid',
                success(res) {
                    // 跳转userInform方法，传入openid进行查询用户信息
                    that.userInform(res.data)
                }

            })
        },
        methods: {
            // 绑定输入监听事件
            onAddress(event) {
                console.log(event)
                this.information.address = event.target.value
            },
            upInfo() {
                // 点击上传信息按钮触发的方法
                var that = this
                uni.request({
                    url: 'http://localhost:3000/web/api/rest/user/' + that.user.id,
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    method: 'PUT',
                    data: {
                        // 将json数据转化成字符串格式进行上传
                        information: JSON.stringify(that.information)
                    },
                    success: (res) => {
                        console.log(res)
                    }
                })
            },

            // 获取用户信息的方法
            userInform(openid) {
                var that = this
                uni.request({
                    url: 'http://localhost:3000/web/is_register/' + openid,
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    method: 'GET',
                    success(res) {
                        console.log('用户信息', res)
                        that.user = res.data[0]

                        that.information = that.user.information
                    },
                    error(err) {
                        console.log(err)
                    }
                })
            },
            chooseFaceImg() {
                // 从相册中选择图片
                var value = this
                uni.chooseImage({
                    count: 1, //选择图片的数量，默认9
                    sizeType: ['compressed'], //原图、压缩图或者两者都有，可以指定原图或压缩图，默认两者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {
                        value.facePath = res.tempFilePaths[0]
                        var info = value.information
                        info.userName = 'zhangsan'
                        info.sex = '男'
                        info.phone = '12345678901'
                        info.email = '123@123'
                        info.address = 'adf'
                        info.birthday = '2011-02-01'
                    }
                })
            },
            chooseBackImg() {
                // 从相册中选择图片
                var value = this
                uni.chooseImage({
                    count: 1, //选择图片的数量，默认9
                    sizeType: ['compressed'], //原图、压缩图或者两者都有，可以指定原图或压缩图，默认两者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {
                        value.backPath = res.tempFilePaths[0]
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .user-input {
        width: 720rpx;
        margin: 30rpx 50rpx;
        display: flex;

        .input {
            width: 560rpx;
            margin-left: 40rpx;
        }
    }

    .fenjie {
        width: 560rpx;
        height: 2rpx;
        background: #ddd;
        margin: 0 auto;
    }

    .car-button {
        width: 400rpx;
        height: 80rpx;
        background: #23dd23;
        border-radius: 4px;
        font-size: 16px;
        line-height: 40px;
        color: white;
        margin-top: 10px;
    }

    .car-image {
        border: 1 solid;
        width: 720rpx;
        height: 400rpx;
        margin: 20rpx 15rpx;
    }

    .up-button {
        width: 160px;
        height: 40px;
        background: #488ac7;
        border-radius: 4px;
        font-size: 16px;
        line-height: 40px;
        color: white;
        margin-top: 30px;
    }

    .notes {
        width: 335px;
        margin: 10px auto 50px;
        font-size: 12px;

        span {
            color: red;
            margin-right: 4px;
        }

        p {
            color: #999;
        }
    }
</style>